<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2023-12-05 14:18:07
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2024-01-15 22:35:19
 * @FilePath: \mdbj-ui\src\views\datamanager\road\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <Split v-model="split1">
      <div slot="left" class="leftPanel">
        <!-- 导入地图容器 -->
        <map-container
        class="map-container"
        @viewHandle="viewHandle">
        </map-container>
      </div>
      <!-- 导入道路信息 -->
      <div slot="right" class="rightPanel">
        <keep-alive>
          <!-- 1、因为是动态加载组件，所以设置v-if判断条件，当componentId赋值后再设置为true，去加载组件，避免子组件获取不到传递的props
          2、启用keep-alive后，子组件的mounted钩子函数只有在初次加载才能触发，之后的切换就不在触发，所以需要在子组件中需要使用activated和deactivated钩子函数。1.activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用 2.deactivated:组件被停用（离开路由）时调用 https://blog.csdn.net/zn740395858/article/details/90141539-->
          <component
            :is="componentId"
            :mapview="mapview"
            :paramObj="paramObj"
            v-if="isMapLoaded"
          ></component>
        </keep-alive>
      </div>
    </Split>

  </div>
</template>

<script>
import { Split } from "../../../components/Split/index";
import mapContainer from "../../../components/Map/mapContainer";
import dataPanel from "./dataPanel";
import detailPanel from "./detailPanel";
import editPanel from "./editPanel";
import addPanel from "./addPanel";
import roadsurfaceAddPanel from "./../roadsurface/addPanel";
import roadsurfaceEditPanel from "./../roadsurface/editPanel";

export default {
  components: {
    Split,
    mapContainer,
    dataPanel,
    detailPanel,
    editPanel,
    addPanel,
    roadsurfaceAddPanel,
    roadsurfaceEditPanel
  },
  provide() {
    return {
      toggleComponent: this.toggleComponent,
    };
  },
  data() {
    return {
      split1: 0.5,
      mapview: undefined,
      componentId: "dataPanel",
      isMapLoaded: false,
      paramObj:{},
    }
  },
  methods: {
    toggleComponent(componentId, paramObj) {
      // this.isMapLoaded = true;

      this.isMapLoaded = false;
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.isMapLoaded = true;
        this.paramObj =
          paramObj == null || paramObj == undefined ? {} : paramObj;
        this.componentId = componentId;
      });
    },
    viewHandle(value){
      console.log("mapview loaded");
      this.mapview = value;
      this.toggleComponent("dataPanel");
    },
  }
};
</script>

<style lang="scss" scoped>
.container{
  /* css3提供的动态计算属性 calc */
  height: calc(100vh - 60px);
}
.leftPanel{
  height: calc(100vh - 60px);
}
.rightPanel {
  height: calc(100vh - 60px);
}
.map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}
.item {
  margin: 0px;
}
</style>
